<template>
    <div class="two">
        <img class="gif" src="https://img.alicdn.com/imgextra/i1/O1CN01PpBvvV23DGnfSFqfi_!!6000000007221-54-tps-1125-150.apng" alt="">
        <div class="tuijian">
            <div class="tjbox1" v-for="(v,index) in showarr" :key="index">
                <img class="tjpos1" src="https://gw.alicdn.com/imgextra/i4/O1CN01mklAVL1HBLYh5myu3_!!6000000000719-2-tps-522-74.png_360x10000.jpg_.webp" alt="">               
                <img class="tjpos2" src="https://gw.alicdn.com/imgextra/i4/O1CN01c7PJve1p576j3o3Wa_!!6000000005308-2-tps-173-44.png_.webp" alt="">
                <div>
                    <img :src="v.img1" alt="">
                    <p>{{ v.brand }}</p>
                    <span>￥{{ v.originprice }}</span>
                </div>
                <div>
                    <img :src="v.img2"
                        alt="">
                    <p>{{ v.brand }}</p>
                    <span>￥{{ v.originprice }}</span>
                </div>
            </div>
        </div>  
        <img class="twoImg" src="https://gw.alicdn.com/imgextra/i4/O1CN014jblPa23YL1ITFoNN_!!6000000007267-2-tps-1430-226.png_790x10000.jpg_.webp" alt="">
    </div>
</template>

<script>

export default {
    data(){
        return{
            showarr:[]
        }
    },
    mounted(){
        this.$http({
            url: "http://118.178.238.19:3001/api/pro/search",
            method: "get",

            params: {
                count: 4,
                limitNum: 2
            }
        }).then(res => {
            this.showarr = res.data.data
            // console.log(res.data.data);
        })
    }
}
</script>

<style scoped>
.two{
    width: 100%;
    position: relative;
    top: 0;
    z-index: 10;
}
.gif{
    width: 100%;
    height: 50px;
}
.tuijian{
    width: 94%;
    height: 128.06px;
    margin: 10px 3%;
    display: flex;
    justify-content: space-between;
}
.tuijian .tjbox1{
    width: 174px;
    height: 100%;
    border-radius: 15px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}
.tjbox1 div{
    height: 89px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.tjbox1 div img{
    width: 57.53px;
    height: 57.53px;
}
.tjbox1 div p{
    color: #666666;
    font-size: 12px;
}
.tjbox1 div span{
    font-size: 16px;
    color: #FE1044;
}
.tjpos1{
    width: 174.09px;
    height: 24.51px;
    position: absolute;
    top: 0;
}
.tjpos2{
    position: absolute;
    top: 8px;
    left: 10px;
    width: 57px;
    height: 14.5px;
}
.twoImg{
    width: 94%;
    height: 56px;
    margin: 0 3%;
}
</style>